<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="pojo.Brand" %>
<%--<%@ page import="jdk.internal.icu.text.UnicodeSet" %>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/brand.css"></link>
    <script type="text/javascript" src="./js/brand.js" defer="true"></script>
    <title>品牌管理页</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        table td {
            border: 1px solid #000;
            text-align: center;
        }

        table tr {

        }
        .hooks{
            width: 100px;
            height: 30px;
            color: white;
            background-color: cornflowerblue;
            border-radius: 3px;
            border-width:0 ;
            margin: 0;
            outline: none;
            font-family: KaiTi;
            font-size: 17px;
            text-align: center;
            cursor: pointer;
        }
        .hooks:hover{
            background-color: #17c6e9;
        }
        select {
            cursor: pointer;
            padding: 10px;
            width: 60px;
            background: transparent;
            background-image: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        select:focus {
            outline: none;
        }
        a {
            color: cornflowerblue;
            display:inline-block;

            margin:0px 0px 5px 5px;

            padding:6px 8px;

            font-size:14px;

            outline:none;

            text-align:center;

            width:50px;

            line-height:30px;

            cursor: pointer;

        }

        a.btn_a:hover {

            color:white;

            background-color:rgba(0,64,156,.8);

        }



        /*  HTML5已不支持   border="1" cellspacing="0" width="800" */
    </style>
</head>
<body>
<h1>${LOGIN_USER.username}，欢迎您！！
    <a class="btn_a" href="${ctx}/logout" style="text-decoration: none">[注销]</a>
</h1>
    <form action="#">
        <span>品牌状态：</span>
        <select name="selectList">
            <option >启用</option>
            <option>禁用</option>
        </select>
    </form>
<span>品牌名称：</span>
<input type="text" placeholder="请输入查询关键字">
<el-input v-model="input" placeholder="请输入内容"></el-input>
<input class="hooks" type="submit" value="查询" >
<input type="reset" value="重置" class="hooks">

<input class="hooks" type="button" value="批量删除" id="delselcted" style="float: right">
<input class="hooks" type="button" value="新增" id="addBtn" style="float: right"><br>
<hr>


<table>
    <tr>
        <th>选择</th>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>

    </tr>
    <c:forEach items="${pageBean.data}" var="brand">
        <tr>
            <td><input type="checkbox"></td>
            <td>${brand.id}</td>
            <td>${brand.brandName}</td>
            <td>${brand.companyName}</td>
            <td>${brand.ordered}</td>
            <td>${brand.description}</td>
            <td>
                <c:if test="${brand.status == 1}">
                    启用
                </c:if>
                <c:if test="${brand.status == 0}">
                    禁用
                </c:if>
            </td>
            <td><a class="btn_a" href="${ctx}/toUpdate?id=${brand.id}">修改</a>
                <a class="btn_a" href="${ctx}/delete?id=${brand.id}" onclick="if(confirm('确定删除?')==false)return false;">删除</a></td>
        </tr>
    </c:forEach>
</table>
<!-- 分页工具容器-->
<div class="page-container">
    <!-- 分页工具栏（pageBar）-->
    <jsp:include page="common/pageBar.jsp">
        <jsp:param name="url" value="/selectAll" />
    </jsp:include>
</div> <!-- end of page-container -->
<div style="margin-top: 50px;">
    <p>当前在线用户数：${applicationScope.userCount}</p>
</div>
</body>
<script>

    let addBtn = document.querySelector("#addBtn");
    addBtn.addEventListener('click',function(){
        window.location.href = "/brand-demo/addBrand.jsp"
    })









    window.onload=function(){
        //给删除选中按钮添加点击事件
        document.getElementById("delselcted").onclick=function(){
            if(confirm("您确定删除这些选项吗？")){  //在删除前给删除添加保险
                //判断选项中是否有被选上的，如果没有的话不执行删除，否则没有if会造成空指针异常
                var flag =false;
                var cbs=document.getElementsByName("id");  //获取所有的选项（包括选的，没有选的）
                for(var i=0;i<cbs.length;i++){
                    if(cbs[i].checked){  //一旦有被选的项，就停止循环
                        flag=true;
                        break;
                    }
                }
                if(flag){//一旦有被选的项，就提交表单
                    //一旦删除选中，首先创建一个表单，把所有信息提交给delselectedservlet处理
                    document.getElementById("form").submit();
                }

            }
        }}

</script>
</html>